<script setup lang="ts">
import {ref,onMounted} from "vue";
import axios from 'axios';
import router from "@/router";
interface AppItem {
  id: number;
  url: string;
  name: string;
  location: string;
  recommend: string;
}

const middlelist = ref<AppItem[]>([]);

onMounted(async () => {
  try {
    const response = await axios.get("http://localhost:8080/AppStore/list");
    middlelist.value = response.data; // 将后端数据赋值给 middlelist

    console.log("后端返回数据：", response.data);
  } catch (error) {
    console.error("数据获取失败:", error);
  }

});
let userId = ref("")
const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
if (userInfoStr) {
  try {
    const userInfo = JSON.parse(userInfoStr); // 解析为对象
     userId = userInfo.id; // 提取用户ID
    // 跳转用户页面
  } catch (error) {
    console.error('解析用户信息失败', error);
    router.push('/sign'); // 解析失败则跳登录
  }
} else {
  router.push('/sign'); // 未登录则跳登录
}
const handleUserClick = () => {
  const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
  if (userInfoStr) {
    try {
        const userInfo = JSON.parse(userInfoStr); // 解析为对象
        const userId = userInfo.id; // 提取用户ID
        // 跳转用户页面
        router.push({name:'download',params:{userId}});
    } catch (error) {
      console.error('解析用户信息失败', error);
      router.push('/sign'); // 解析失败则跳登录
    }
  } else {
    router.push('/sign'); // 未登录则跳登录
  }
};
</script>

<template>

<div
    v-for="(item, index) in middlelist"
    :key="index"
    style="border-radius: 30px; margin-bottom: 0"
>

  <div class = "middleContainer">
    <span class = "appMessage">
      <router-link :to="{name: 'AppView',params:{id:item.id},query:{userId:userId}}" tag = "div">
       <img :src="item.url" alt="" class = "card" >
      </router-link>
     <span class = "desc">
       <span class = "carName">{{ item.name }}</span>
       <span style = "font-size: 12px">{{ item.location }}</span>
       <span style = "font-size: 11px">{{ item.recommend }}</span>
     </span>
    </span>
      <button @click = "handleUserClick" class="installButton" >安装</button>
  </div>

</div>

</template>

<style scoped>
.middleContainer{
  display:flex;
  align-items: center;
    flex: 1;
    /* 让内容超出后可滚动 */
    overflow-y: auto;

}

/*软件信息描述容器*/
.appMessage{
  display:flex;
  margin-left: 13px;
  width: 400px;
}

/*文字描述排版*/
.desc{
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  margin-left: 20px;
  margin-top: 20px;

}
/*安装按钮样式排版*/
.installButton{
  display: flex;
  /* 让按钮内部文字元素水平垂直居中 */
  justify-content: center;
  align-items: center;
  background: dodgerblue;
  color: white;
  border-radius: 5px;
  margin-top: 30px;
  margin-right: 10px;
  min-width: 47px;
}
/*软件名称加粗*/
.carName{
  font-weight: bold;
  font-size: 14px;
}
/*软件图标样式大小*/
.card{
  display: flex;
  width: 70px;
  margin-top: 7px;
  border-radius: 10px;
}
</style>